<template>
  <view class="innerContain">
    <view class="top-content"></view>
         <view class='topradio'>
    <view class="top">
      <card :data="data" :cartcount='cartcount' :header='tableheader'/>
    </view>
    <!-- 文字 -->
    <view v-if="dataType =='string'" class="childborder">
			<u-form :model="form" ref="uForm" :error-type="errorType">
					<u-form-item  class="selectone"  style="padding:0rpx 0rpx 0rpx 0rpx;margin-top:-20rpx;"  label-width='400' :label="header" prop="detail">
						<u-input  style="right:32rpx" type="text" :placeholder="'请输入'+header"  v-model="form.detail" />
					</u-form-item>
				</u-form>
		</view>
    <view v-else class="childborder">
      <u-form v-if="category==1" :model="form" ref="uForm" :error-type="errorType">
        <!-- 正常 -->
         <view v-if='form.status=="正常"'>
         <u-form-item  class="selectone" style="padding:0rpx 0rpx 12rpx 0rpx;margin-top:-14rpx;" label="状态" prop="status">
            <u-tag v-if='form.status=="正常"' :text="form.status" type="success" mode='dark' style="" size='mini' shape="circle"/>
           <u-tag v-else-if='form.status=="异常"' :text="form.status" type="error" mode='dark' style="" size='mini' shape="circle"/>
            <u-input
              class="input1"
              v-model="form.status"
              type="select"
              placeholder="请选择状态"
              @click="showStatus = true"
            />
            <u-select v-model="showStatus" :list="statusList" @confirm="selectStatus"></u-select>
          </u-form-item>
        </view>
        <!-- 异常 -->
        <view v-else>
          <u-form-item  class="selectone" style="padding:0rpx 0rpx 24rpx 0rpx;margin-top:-14rpx;" label="状态" prop="status">
            <u-tag v-if='form.status=="正常"' :text="form.status" type="success" mode='dark' style="" size='mini' shape="circle"/>
           <u-tag v-else-if='form.status=="异常"' :text="form.status" type="error" mode='dark' style="" size='mini' shape="circle"/>
            <u-input
              class="input1"
              v-model="form.status"
              type="select"
              placeholder="请选择状态"
              @click="showStatus = true"
            />
            <u-select 
              v-model="showStatus"
             :list="statusList" 
             @confirm="selectStatus">
             </u-select>
          </u-form-item>
        </view>
        <view class v-if="isShow" v-for="(item,index) in checkList" :key="index">
          <selectDom @selsectClick='selsectClick' @cracklemethods="cracklemethods" :checkListData='checkListData' :itemdata ='item' :indexdata = 'index' :checkList='checkList' :reversedMessage='reversedMessage'/>
          <u-form-item v-if="item.dataType == 'string'"  :class="index+1 == checkList.length ? 'borderbottom selectone1' : 'selectone1'" label-width="170" :label=item.field  >
            <u-input type="text"  style="right:32rpx"  v-model="checkListData[index]" />
          </u-form-item>
             <u-form-item v-if="item.dataType == 'photo'" label-width="170"  class='borderbottom selectone1'  :label=item.field >
               </u-form-item> 
          <imageDom v-if="item.dataType == 'photo'" :value = 'checkListData[index]' :imageIndex ='index' @imageupload ='imageupload'/>
           <u-form-item v-if="item.dataType == 'video'" label-width="170" class='borderbottom selectone1' :label=item.field>
               </u-form-item> 
          <videoUpload v-if="item.dataType == 'video'" v-model="checkListData[index]" @videouploda='videouploda' :imageIndex ='index'/> 
        </view>
      </u-form>
      <u-form v-if="category==0" :model="form" ref="uForm" :error-type="errorType">
        <!-- 正常 -->
         <view v-if='form.status=="正常"'>
         <u-form-item  class="selectone" style="padding:0rpx 0rpx 12rpx 0rpx;margin-top:-14rpx;" label="状态" prop="status">
            <u-tag v-if='form.status=="正常"' :text="form.status" type="success" mode='dark' style="" size='mini' shape="circle"/>
           <u-tag v-else-if='form.status=="异常"' :text="form.status" type="error" mode='dark' style="" size='mini' shape="circle"/>
            <u-input
              class="input1"
              v-model="form.status"
              type="select"
              placeholder="请选择状态"
              @click="showStatus = true"
            />
            <u-select v-model="showStatus" :list="statusList" @confirm="selectStatus"></u-select>
          </u-form-item>
        </view>
        <!-- 异常 -->
        <view v-else>
          <u-form-item  class="selectone" style="padding:0rpx 0rpx 24rpx 0rpx;margin-top:-14rpx;" label="状态" prop="status">
            <u-tag v-if='form.status=="正常"' :text="form.status" type="success" mode='dark' style="" size='mini' shape="circle"/>
           <u-tag v-else-if='form.status=="异常"' :text="form.status" type="error" mode='dark' style="" size='mini' shape="circle"/>
            <u-input
              class="input1"
              v-model="form.status"
              type="select"
              placeholder="请选择状态"
              @click="showStatus = true"
            />
            <u-select 
              v-model="showStatus"
             :list="statusList" 
             @confirm="selectStatus">
             </u-select>
          </u-form-item>
        </view>
        <view class  v-for="(item,index) in checkList" :key="index">
          <selectDom @selsectClick='selsectClick' @cracklemethods="cracklemethods" :checkListData='checkListData' :itemdata ='item' :indexdata = 'index' :checkList='checkList' :reversedMessage='reversedMessage'/>
          <u-form-item v-if="item.dataType == 'string'"  :class="index+1 == checkList.length ? 'borderbottom selectone1' : 'selectone1'" label-width="170" :label=item.field  >
            <u-input type="text"  style="right:32rpx"  v-model="checkListData[index]" />
          </u-form-item>
             <u-form-item v-if="item.dataType == 'photo'" label-width="170"  class='borderbottom selectone1'  :label=item.field >
               </u-form-item> 
          <imageDom v-if="item.dataType == 'photo'" :value = 'checkListData[index]' :imageIndex ='index' @imageupload ='imageupload'/>
           <u-form-item v-if="item.dataType == 'video'" label-width="170" class='borderbottom selectone1' :label=item.field>
               </u-form-item> 
          <videoUpload v-if="item.dataType == 'video'" v-model="checkListData[index]" @videouploda='videouploda' :imageIndex ='index'/> 
        </view>
      </u-form>
    </view>

    <view class="footer">
    	<u-button @click='submit1()' v-if='btnShow' class="btn" type="primary" :ripple="true" ripple-bg-color="#32afff">保存
    	</u-button>
      <u-button @click='submit1()' v-if='!btnShow' class="btn1" type="primary" :ripple="true" ripple-bg-color="#32afff">提交
    	</u-button>
    	<u-button @click='submit()' v-show="category==1" v-if='!btnShow' class="btn1" type="primary" :ripple="true" ripple-bg-color="#32afff">处理
    	</u-button>
    </view>
  </view>

  </view>
  
</template>

<script>
import card from "../details/detailmodel";
import imageDom from "./image";
import selectDom from "./select";
import handleDemo from "../handleDemo/handleDemo.vue";
import {
  pointCheckDeviceDetail,
  pointCheckDeviceDetailEdit,
  pointCheckDescriptionAdd,
  pointCheckeDviceDetailList,
  pointCheckDeviceDetailAdd,
  pointCheckDescriptionEdit,
  pointCheckDeviceDetai,
  pointCheckDeviceDdescription,
  pointCheckDescriptiont
} from "@/api/index.js";
export default {
  components: {
    card,
    handleDemo,
    selectDom,
    imageDom
  },
  data() {
    return {
      dataType: undefined,
      checkList: [],
      checkListData: [],
      btnShow: true,
      headers: {
        Authorization: "Bearer " + uni.getStorageSync("token")
      },
      form1: {},
      from3: "",
      errorType: ["message"],
      form: { status: "" },
      isShow: true,
      showStatus: false,
      data: {},
      statusList1: ["zheng", "fam"],
      statusList: [
        {
          value: "1",
          label: "正常"
        },
        {
          value: "2",
          label: "异常"
        }
      ],
      category:''
    };
  },
  onLoad(val) {
    this.cartcount = getApp().globalData.uname;
    this.state = val.Tdata;
    this.tf = val.tf;
    this.taskDeviceId = val.taskDeviceId;
    this.Tdata = val.Tdata;
    this.back = val.back;
    this.header = val.header;
    this.tableheader = val.tableheader;
    this.phone = val.phone;
    this.category = val.category;
    this.manufacturer = val.manufacturer;
    this.configID = val.configInfoID;
    // 动态设置表头
    uni.setNavigationBarTitle({
      title: this.header
    });
    this.getList();
  },
  onShow() {

  },
  onBackPress(e) {
    if (e.from == "backbutton") {
      if (this.back) {
        uni.navigateBack();
      }
    }
  },
  watch: {
    "form.status": {
      // 可以监听对象的单个属性
      handler(newval, oldval) {
        if (this.form.status == "异常") {
          this.isShow = true;
          this.btnShow = false;
        } else if (this.form.status == "正常") {
          this.isShow = false;
          this.btnShow = true;
        }
      },
      deep: true
    }
  },
  computed: {
    reversedMessage: function(index) {
      // `this` 指向 vm 实例
      return function(index) {
        let arr = [];
        for (let i in JSON.parse(this.checkList[index].detail)) {
          arr[i] = {
            value: i,
            label: JSON.parse(this.checkList[index].detail)[i]
          };
        }
        return arr;
      };
    }
  },
  methods: {
    videouploda(index){
      this.checkListData[index] = ''
    },
    imageupload(data,index){
      this.checkListData[index] = data
    },
    getList() {
      let _this = this;
      uni.showLoading({
        title: "加载中"
      });
      if (this.tf) {
        this.isShow = false;
        this.state = this.taskDeviceId;
        pointCheckDeviceDdescription(this.state).then(res => {
          if (res.data.length < 1) {
            _this.dataType = "string";
          } else {
            _this.checkList = res.data;
            for (let i in _this.checkList) {
              _this.checkListData[i] = _this.checkList[i].value;
            }
          }
        });
        pointCheckDeviceDetai(this.state).then(res => {
          this.category = res.data.category
          this.id = res.data.id;
          this.form = res.data;
          uni.hideLoading();
        });
        this.isShow = false;
      } else {
        pointCheckDeviceDdescription(this.configID).then(res => {
          if (res.data.length < 1) {
            _this.dataType = "string";
          } else {
            _this.checkList = res.data;
            for (let i in _this.checkList) {
              _this.checkListData[i] = _this.checkList[i].value;
            }
          }
        });
        pointCheckDeviceDetail(this.state).then(res => {
          res.data[this.tableheader].pointCheckDeviceDetails.forEach(item => {
            if (item.item == this.header) {
              this.id = item.id;
              for (let i in item) {
                if (!item[i]) {
                  delete item[i];
                }
              }
              this.form = item;
            } else {
              this.isShow = false;
            }
          });
          this.isShow = false;
          uni.hideLoading();
        });
      }
    },
    selsectClick(index) {
      this.indexID = index;
    },
    returnHandle() {
      let _this = this;
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let data = {};
          if (this.dataType == "string") {
            data = {
              id: String(this.id),
              taskDeviceId: String(this.state),
              type: this.tableheader,
              item: this.header,
              status: "正常",
              detail: this.form.detail
            };
          } else {
            data = {
              id: String(this.id),
              taskDeviceId: String(this.state),
              type: this.tableheader,
              item: this.header,
              status: this.form.status
            };
          }

          if (!data.id | (data.id == "undefined")) {
            delete data["id"];
          }
          if (this.tf) {
            data.taskDeviceId = String(this.Tdata);
          }
          pointCheckDeviceDetailAdd(data).then(res => {
            if (this.back) {
              uni.navigateBack();
              uni.navigateBack();
            } else {
              uni.navigateBack({
                delta: 1
              });
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    submit1() {
      const _this = this;
      const data = {
        id: String(this.id),
        taskDeviceId: String(this.state),
        type: this.tableheader,
        item: this.header,
        file: this.form.file,
        status: this.form.status,
        detail: this.form.detail
      };
      const data2 = {
        id: String(this.childid),
        detailId: String(this.id),
        name: this.form.name,
        address: this.form.address,
        errmsg: this.form.errmsg,
        value: this.form.value
      };
      if ((data.id == null) | (data.id == "") | (data.id == "undefined")) {
        delete data["id"];
      }
      if ((data2.id == null) | (data2.id == "") | (data2.id == "undefined")) {
        delete data2["id"];
      }
      if (this.tf) {
        data.taskDeviceId = String(this.Tdata);
        pointCheckDeviceDetailAdd(data).then(res => {
          pointCheckDeviceDetail(this.Tdata).then(res1 => {
            for (let i in _this.checkList) {
              _this.checkList[i].value = _this.checkListData[i];
            }
            pointCheckDescriptiont(_this.checkList).then(res2 => {
              if (this.back) {
                uni.navigateBack();
                uni.navigateBack();
              } else {
                uni.navigateBack({
                  delta: 1
                });
              }
            });
          });
        });
      } else {
        pointCheckDeviceDetailAdd(data).then(res => {
          pointCheckDeviceDetail(this.state).then(res1 => {
            res1.data[this.tableheader].pointCheckDeviceDetails.forEach(
              item => {
                if (item.item == this.header) {
                  data2.detailId = item.id;
                  for (let i in _this.checkList) {
                    _this.checkList[i].value = _this.checkListData[i];
                  }
                  pointCheckDescriptiont(_this.checkList).then(res2 => {
                    uni.navigateBack({
                      delta: 1
                    });
                  });
                }
              }
            );
          });
        });
      }
    },
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          const _this = this;
          const data = {
            id: String(this.id),
            taskDeviceId: String(this.state),
            type: this.tableheader,
            item: this.header,
            file: this.form.file,
            status: this.form.status,
            detail: this.form.detail
          };
          const data2 = {
            id: String(this.childid),
            detailId: String(this.id),
            name: this.form.name,
            address: this.form.address,
            errmsg: this.form.errmsg,
            value: this.form.value
          };
          if ((data.id == null) | (data.id == "") | (data.id == "undefined")) {
            delete data["id"];
          }
          if (
            (data2.id == null) |
            (data2.id == "") |
            (data2.id == "undefined")
          ) {
            delete data2["id"];
          }
          if (this.tf) {
            data.taskDeviceId = String(this.Tdata);
            pointCheckDeviceDetailAdd(data).then(res => {
              pointCheckDeviceDetail(this.Tdata).then(res1 => {
                for (let i in _this.checkList) {
                  _this.checkList[i].value = _this.checkListData[i];
                }
                pointCheckDescriptiont(_this.checkList).then(res2 => {
                  uni.navigateTo({
                    url:
                      `/pages/handleDemo/handleDemo?position=1&number=` +
                      data2.detailId +
                      "&id=" +
                      this.id +
                      "&back=" +
                      true +
                      "&phone=" +
                      this.phone +
                      "&manufacturer=" +
                      this.manufacturer
                  });
                });
              });
            });
          } else {
            pointCheckDeviceDetailAdd(data).then(res => {
              pointCheckDeviceDetail(this.state).then(res1 => {
                res1.data[this.tableheader].pointCheckDeviceDetails.forEach(
                  item => {
                    if (item.item == this.header) {
                      data2.detailId = item.id;
                      for (let i in _this.checkList) {
                        _this.checkList[i].value = _this.checkListData[i];
                      }
                      pointCheckDescriptiont(_this.checkList).then(res2 => {
                        uni.navigateTo({
                          url:
                            `/pages/handleDemo/handleDemo?position=1&number=` +
                            data2.detailId +
                            "&id=" +
                            this.id +
                            "&phone=" +
                            this.phone +
                            "&manufacturer=" +
                            this.manufacturer
                        });
                      });
                    }
                  }
                );
              });
            });
          }
        } else {
          console.log("验证失败");
        }
      });
    },
    selectStatus(e) {
      this.form.status = e[0].label;
      if (e[0].value === "2") {
        this.isShow = true;
        this.btnShow = false;
      } else {
        this.isShow = false;
        this.btnShow = true;
      }
    },
    onReady() {
      // this.$refs.uForm.setRules(this.rules);
    },
    cracklemethods(e) {
      this.checkListData[this.indexID] = e;
    }
  }
};
</script>
<style lang="scss" scoped>
.innerContain {
  height: 100%;
  position: relative;
  background-color: white;
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 200rpx);
  overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.btn1 {
  background: linear-gradient(-34deg, #1040be, #026dff);
  flex: 1;
  margin: 0rpx 10rpx;
  height: 91rpx;
  float: left;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  border-radius: 46rpx;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 34rpx 34rpx 10rpx 34rpx;
  margin: 24rpx;

  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
.footer {
  background-color: transparent;
  display: flex;
}
.btn {
  background: linear-gradient(-34deg, #1040be, #026dff);
  width: 544rpx;
  height: 91rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  border-radius: 46rpx;
}
/deep/ .u-form-item--left__content__label {
  font-size: 33rpx;
}
/deep/ .u-input__input {
  // color:
}

.co {
  color: red;
}
/deep/ .u-input__input {
  text-align: right;
}
/deep/ .u-form-item__message {
  text-align: right;
  margin-right: 32rpx;
}
.borderbottom:after {
  border-bottom-width: 0px !important;
}
/deep/ .input1 > .u-input__input > .uni-input-wrapper > .uni-input-input {
  display: none !important;
  //  color:red !important
}
/deep/ .selectone:after {
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
.selectone1:after {
  border-top-width: 1px !important;
}
</style>
